<template>
<div class="wrapper tag-item"> 
    <div class="fl left-list"> 
     <div class="tc-data-list"> 
      <div class="tc-list" v-infinite-scroll="loadMore"> 
       
       <ul class="detail-list"> 
        <li class="qa-item" v-for="(item,index) in items" :key="index"> 
         <div class="fl record"> 
          <div class="number"> 
           <div class="border useful"> 
            <p class="usenum"><a @click="thumbup(index)" class="zan"><i :class="'fa fa-thumbs-up '+item.spitStyle" aria-hidden="true"></i></a></p> 
            <p class="zannum"> {{item.thumbup}} </p> 
           </div> 
           <div class="border answer"> 
            <a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a> 
           </div> 
          </div> 
         </div> 
         <div class="info"> 
          <p class="text"> <a :href="`/spit/item/${item.id}`">  {{item.content}} </a> </p> 
          <div class="other"> 
           <div class="fl date"> 
            <span> {{item.publishtime}}</span> 
           </div> 
           <div class="fr remark"> 
            <a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a> 
            <a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a> 
           </div> 
          </div> 
         </div> 
         <div class="clearfix"></div> </li> 
       </ul> 

       <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
        <div class="modal-dialog" role="document"> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
           <h4 class="modal-title" id="myModalLabel">分享到</h4> 
          </div> 
          <div class="modal-body" style="overflow:hidden"> 
           <div class="jiathis_style_32x32"> 
            <a class="jiathis_button_qzone"></a> 
            <a class="jiathis_button_tsina"></a> 
            <a class="jiathis_button_weixin"></a> 
            <a class="jiathis_button_cqq"></a> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="modal fade" id="remarkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
        <div class="modal-dialog" role="document"> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
           <h4 class="modal-title" id="myModalLabel">发表评论</h4> 
          </div> 
          <div class="modal-body"> 
           <div class="comment"> 
            <span class="who"><img src="~/assets/img/asset-photo.png" />匿名评论</span>: 今天入职腾讯，产品岗，普通非985211大学，上家是不到五十人创业小公司！16年毕业！找内推腾讯给的面试机会，五轮面试！可能是我把运气攒一起了！ 
           </div> 
           <div class="form"> 
            <textarea class="form-control" rows="5" placeholder="匿名评论"></textarea> 
            <div class="remark"> 
             <button class="sui-btn btn-info">发表</button> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="fl right-tag"> 
     <div class="block-btn"> 
      <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p> 
      <a class="sui-btn btn-block btn-share" href="/spit/submit">发吐槽</a> 
     </div> 
    </div> 
    <div class="clearfix"></div> 
   </div> 
</template>

<script>
import "~/assets/css/page-sj-spit-index.css"
import spitApi from "~/api/spit"
import auth from "~/utils/auth"
export default {
    //服务端渲染的方法
    asyncData() {
        return spitApi.search(1,10,{state:'1'}).then(res => {
            //console.log(res.data)
            //id ,name ..  扩展样式  spitStyle
            let items = res.data.data.rows.map( item=> {
                return {
                    ...item,
                    spitStyle:''
                }
            })
            return {
                items:items
            }
        })
    },
    data () {
        return {
            page:2,
            size:10
        }
    },
    methods: {
        loadMore:function() {
          spitApi.search(this.page++,this.size,{}).then(res => {
              this.items = this.items.concat(res.data.data.rows)
          })
        },
        thumbup:function(index) {
            //alert(index)
            let spitItem = this.items[index];
            //登录成功之后才能点击
            let user = auth.getUser();
            if(user == null || user.name == null ) {
                location.href="/login"
            }
            if(spitItem.spitStyle == 'color') {
                alert("不可重读点击")
                return 
            }
           // alert(spitItem.id)
           spitApi.thumbup(spitItem.id).then(res => {
               //alert(res.data.message)
               this.$message({
                "message":res.data.message,
                "type":res.data.flag?'success':'error'
               })
               if(res.data.flag) {
                   //样式
                   spitItem.spitStyle="color"
               }
           })
        }
    }
}
</script>

<style>

</style>
